<template>
  <div class="viewBlock">
    <!--<div class="crumbs" v-if="$route.meta.displayName">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-setting"></i>设备监控</el-breadcrumb-item>
                <el-breadcrumb-item>{{$route.meta.displayName}}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>-->
    <!-- <div class="aboutBlockText clearFix"> </div> -->

    <div class="bd">
      <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
        <el-col :span="10">
          <el-input v-model="input" class="input-select" :placeholder="$t('Please enter the keywords')" size='small' icon="search" @change="inputChangeAction">
            <el-select v-model="dataSelectModel" slot="prepend" filterable clearable @change="selectChange" ref="dataSelectModel" placeholder="设备分组">
              <el-option v-for="item in dataClassify" :label="item.label" :value="item.value" :key="item.id">
              </el-option>
            </el-select>
          </el-input>
        </el-col>
        <el-col>
          <scriptComp></scriptComp>
        </el-col>
      </el-row>
      <!-- <el-button size="small" type="success" @click="addDevice()">添加设备测试</el-button> -->
      <addDevice :devId='dataId' :devType="dataType" :devName="dataName"></addDevice>
      <tree-grid :columns="columns" :tree-structure="true" :data-source="dataSource" @transferRow="queryData" @rowdbClick="rowdbClick" @setViewer="setViewer" @handleDelete="handleDelete" @transferHostData="transferHostData" @updateItemProperties="updateItemProperties"></tree-grid>

      <!-- 弹出对话框  -->
      <div id="devicemgm-dialog" style="display:none">
        <component :is="currentViewComp" :currentMapElementData="currentMapElementData" transition="fade" transition-mode="out-in" keep-alive></component>
      </div>
      <div>
        <itemPropertiesUpdate  ref="dialogInstance" @updateItemPropertiesSuccess="updateItemPropertiesSuccess" ></itemPropertiesUpdate>
      </div>
    </div>
  </div>
</template>

<script>
import {
  TreeGrid
} from 'components/TreeTable'
import addDevice from './addDevice.vue'
import scriptComp from 'components/script/index.vue'
import art from 'utils/artdialog'
import exchangeRuijieComp from 'views/topo/exchange_ruijie.vue'
import api from 'api/device'
import {
  RES_HOSTGROUP,
  RES_HOST,
  RES_GRAPHY
} from 'common/resTypeEnum'
import itemPropertiesUpdate from './itemPropertiesUpdate.vue'
export default {
  name: 'deviceMgm',
  data() {
    return {
      columns: [{
        text: '可见名称',
        dataIndex: 'name'
      },
      {
        text: '主机名',
        dataIndex: 'host'
      },
      {
        text: '类型',
        dataIndex: 'type'
      }
        // ,
        // {
        //   text: '最新数据',
        //   dataIndex: 'lastdata'
        // }
      ],
      dataSource: [],
      baseDataSource: [],
      dataId: '',
      dataType: 2,
      dataName: '',
      dataClassify: [], //数据类别
      dataSelectModel: '',
      input: '',
      currentViewComp: null,
      currentMapElementData: {
        elementid: ''
      }
    }
  },
  components: {
    TreeGrid,
    addDevice,
    exchangeRuijieComp,
    scriptComp,
    itemPropertiesUpdate
  },
  created() {
    this.listHostgroup();
    this.initExchangerHostData();
  },
  methods: {
    handleDelete(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        let ids = row.id;
        switch (row.type) {
          case RES_HOSTGROUP:
            api.deleteHostgroupByIds(ids).then((response) => {
              let data = response.data;
              if (ids == data[0]) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                // this.dataSource.splice(this.dataSource.indexOf(row),1);
                this.listHostgroup();
              }
            }).catch((err) => {
              this.$message({
                type: 'info',
                message: '删除失败'
              });
              console.log(err);
            });
            break;
          case RES_HOST:
            api.deleteHostByIds(ids).then((response) => {
              let data = response.data;
              if (ids == data[0]) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                // this.dataSource.splice(this.dataSource.indexOf(row),1);
                this.listHostgroup();
              }
            }).catch((err) => {
              this.$message({
                type: 'info',
                message: '删除失败'
              });
              console.log(err);
            });
            break;
          case RES_GRAPHY:
            api.deleteGraphByIds(ids).then((response) => {
              let data = response.data;
              if (ids == data[0]) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                // this.dataSource.splice(this.dataSource.indexOf(row),1);
                this.listHostgroup();
              }
            }).catch((err) => {
              this.$message({
                type: 'info',
                message: '删除失败'
              });
              console.log(err);
            });
            break;
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    inputChangeAction() {
      var filterData = [];
      var self = this;
      if (this.input == '') {
        this.dataSource = this.baseDataSource;
      } else {
        this.dataSource = this.baseDataSource.filter(function(v) {
          //遍历行值，如果存在返回该行
          var result = false;
          if (("" + v['name'] + "").indexOf(self.input) >= 0) {
            result = true;
          }
          return result;
        });
      }
    },
    selectChange() {
      if (this.dataSelectModel) {
        api.queryHostByGroupid(this.dataSelectModel).then((response) => {
          this.dataSource = response.data;
          this.baseDataSource = response.data;
        }).catch((err) => {
          console.error(err);
        });
      } else {
        this.listHostgroup();
      }
    },
    listHostgroup() {
      var self = this;
      api.listHostgroup().then((response) => {
        self.dataSource = response.data;
        this.baseDataSource = response.data;
        for (var i = 0; i < response.data.length; i++) {
          this.dataClassify.push({ label: response.data[i].name, value: response.data[i].id });
        }
      }).catch((err) => {
        console.error(err);
      });
    },
    queryData(rowData) {
      var self = this;
      // 判断请求数据类型，调用api
      var dataType = rowData.row.type;
      this.isEdit = false;
      this.dataId = rowData.id;
      switch (dataType) {
        case RES_HOSTGROUP:
          api.queryHostByGroupid(rowData.row.id).then((response) => {
            rowData.row.children = response.data;
          }).catch((err) => {
            console.error(err);
          });
          break;
        case RES_HOST:
          api.queryGraphByHostid(rowData.row.id).then((response) => {
            rowData.row.children = response.data;
          }).catch((err) => {
            console.error(err);
          });
          break;
        case RES_GRAPHY:
          api.queryItemByGraphid(rowData.row.id).then((response) => {
            rowData.row.children = response.data;
          }).catch((err) => {
            console.error(err);
          });
          break;
        default:
          break;
      }
    },
    rowdbClick(rowData) {
      var self = this;
      // 判断请求数据类型，调用api
      var dataType = rowData.type;
      var dataName = rowData.name;

      this.dataType = parseInt(dataType);
      this.dataName = "" + dataName + "";
      this.dataId = "" + rowData.id + "";
      $(".rightLayout").show().animate({
        left: "20%"
      }).addClass("showBlock");
      $(".layoutTop").show().animate({
        left: "20%"
      }); //右侧顶部固定
      $("body").addClass("hideScoll"); //隐藏主滚动条，禁止出现双滚
    },
    setViewer(controlType) {
      if (controlType == 'addDevice') {
        this.isEdit = true;
        this.dataId = "";
        this.dataType = -1;
      }
      if (controlType == 'editDevice') {
        this.isEdit = true;
        this.dataId = "";
        this.dataType = -1;
      }
    },
    initExchangerHostData() {
      const self = this;

      this.$store.dispatch('getExchangerInterfaceData').then((response) => {
      }).catch(err => {
        // self.$message({type: 'error', message: self.$t('get interface failed') + ', ' + err});
      });

      this.$store.dispatch('getExchangerHostData').then((response) => {
      }).catch(err => {
        // self.$message({type: 'error', message: self.$t('get interface failed') + ', ' + err});
      });
    },
    transferHostData(row) {
      const self = this;
      this.currentMapElementData.elementid = row.hostid;
      this.currentViewComp = exchangeRuijieComp;
      //设备面板图 弹窗
      const deviceDialog = art.artdialog('设备面板图', $('#devicemgm-dialog'), 1000, 500, 'devicemgmdialog');
      deviceDialog.addEventListener('close', function() {
        self.currentViewComp = null;
      });
    },
    updateItemProperties(row) {
      const self = this;
      // self.row = row;
      // self.currentItemPropertiesComp = itemPropertiesUpdate;
      console.log(self.$refs);
      self.$refs.dialogInstance.setData(row);
      self.$refs.dialogInstance.showDialog();
      // setTimeout(()=>{
      //   console.log(self.$refs);
      //   self.$refs.dialogInstance.showDialog();
      // },1000);
      //调整数据更新间隔 弹窗
      console.log('updateItemProperties');
    },
    updateItemPropertiesSuccess(){
      const self = this;
      self.listHostgroup();
    }

  }
}
</script>

<style>

</style>
